<template>
	<div class="nav_menu">
		<el-menu
			class="menu"
			:collapse-transition="false"
			router
			:collapse="isCollapse"
			background-color="#2F4156"
			text-color="#fff"
			active-text-color="#ffd04b">
			<div class="menu-header" v-show="!isCollapse">
				<span>双碳管理系统</span>
			</div>
			<el-menu-item index="/home">
				<span slot="title">主页</span>
			</el-menu-item>
			<el-submenu index="2">
				<template slot="title">
					<span slot="title">智能双碳</span>
				</template>
				<el-menu-item index="/energyWarning">
					<span slot="title">能效预警</span>
				</el-menu-item>
				<el-submenu index="2-1">
					<template slot="title">
						<span slot="title">双碳管理</span>
					</template>
					<el-menu-item index="/energyDataCollection">
						<span slot="title">能耗数据采集</span>
					</el-menu-item>
				</el-submenu>
			</el-submenu>
			<el-submenu index="3">
				<template slot="title">
					<span slot="title">制造执行MES</span>
				</template>
				<el-menu-item index="/projectMaintenance">
					<span slot="title">项目维护</span>
				</el-menu-item>
				<el-menu-item index="/factoryModeling">
					<span slot="title">工厂建模</span>
				</el-menu-item>
				<el-menu-item index="/deviceInformation">
					<span slot="title">设备信息</span>
				</el-menu-item>
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
export default {
	props: {
		isCollapse: Boolean,
	},
	name: "Aside",

	data() {
		return {};
	},

	mounted() {},

	methods: {},
};
</script>

<style lang="scss" scoped>
.nav_menu {
	min-height: 100vh;
	.menu {
		border: none;
		.menu-header {
			height: 40px;
			text-align: center;
			line-height: 40px;
			span {
				color: white;
				font-weight: bold;
				font-size: 20px;
			}
		}
		span {
		}
	}
}
</style>